<template>
  <div class="contBox">
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col v-for="(cItem, index) of toCardConfig" :key="index" :span="8">
        <NumCard
          :icon="cItem.icon"
          :number="cItem.number"
          :title="cItem.title"
        />
      </el-col>
    </el-row>
    <el-card>
      <div class="r-card-header">
        <WorkSearch :conditions.sync="conditions" />
      </div>
      <!-- 工单列表 -->

      <Rtable :url="url" :conditions="conditions" :columns="columns" :size="14">
        <template #operate="scope">
          <el-button type="text" @click="showDispose(scope.row)">
            {{ $t('btns.view') }}
          </el-button>
        </template>
      </Rtable>
    </el-card>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import Rtable from '@/components/r-table'
import url from '@/api/url'
import { statWo } from '@/api/workOrder'
import WorkSearch from './components/WorkSearch'
import NumCard from './components/NumCard'

// woGetPage
export default {
  components: {
    Rtable,
    WorkSearch,
    NumCard
  },
  data() {
    return {
      url: url.woGetPage,
      conditions: {},
      woState: {}
    }
  },
  computed: {
    toCardConfig() {
      const { pendingOrder, processed, processing } = this.woState || {}
      return [
        {
          number: pendingOrder || 0,
          title: this.$t('workOrderMg.waitList'),
          icon: 'details_wait'
        },
        {
          number: processing || 0,
          title: this.$t('workOrderMg.inHand'),
          icon: 'details_InProgress'
        },
        {
          number: processed || 0,
          title: this.$t('workOrderMg.processed'),
          icon: 'order_finish'
        }
      ]
    },
    columns() {
      return [
        {
          prop: 'workOrderId',
          label: this.$t('workOrderMg.workOrderId')
        },
        {
          prop: 'typeName',
          label: this.$t('workOrderMg.typeName')
        },
        {
          prop: 'moduleName',
          label: this.$t('workOrderMg.moduleName')
        },
        {
          prop: 'orderStatusName',
          label: this.$t('workOrderMg.orderStatusName')
        },
        {
          prop: 'tenantCode,tenantName',
          label: this.$t('workOrderMg.tenantName'),
          formatter: row => `${row.tenantCode}(${row.tenantName})`
        },
        {
          prop: 'createdDate',
          label: this.$t('workOrderMg.createdDate')
        },
        {
          prop: 'dealByName',
          label: this.$t('workOrderMg.dealByName')
        },
        {
          label: this.$t('workOrderMg.operation'),
          width: 90,
          operates: [
            {
              el: 'button',
              text: this.$t('workOrderMg.view'),
              opEvent: this.toDispose
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.loadOrderState()
  },
  methods: {
    async loadOrderState() {
      const { retData } = await statWo()
      this.woState = retData
    },

    toDispose(item) {
      // // 状态(W:等待；D：处理中；C：完成) 在 等待状态可以编辑，处理状态不可修改
      this.$router.push({
        name: 'woProcessing',
        query: { processId: item.workOrderId }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
